<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">班级管理</el-breadcrumb-item>
      <el-breadcrumb-item>教师管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-row :gutter="40">
        <el-col span="2">条件</el-col>
        <el-col span="4">
          <el-select v-model="select" placeholder="请选择">
            <el-option label="性名" value="性名"></el-option>
            <el-option label="性别" value="性别"> </el-option>
          </el-select>
        </el-col>
        <el-col span="9">
          <el-input v-model="querytxt" clearable>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col span="4">
          <el-button type="primary">添加</el-button>
        </el-col>
      </el-row>
      <el-row class="showdata">
        <el-table :data="tableData" style="width: 100%" stripe border>
          <el-table-column prop="id" label="教师编号"> </el-table-column>
          <el-table-column prop="name" label="教师姓名"> </el-table-column>
          <el-table-column prop="sex" label="教师性别"> </el-table-column>
          <el-table-column prop="age" label="教师年龄"> </el-table-column>
          <el-table-column prop="phone" label="电话号码"> </el-table-column>
          <el-table-column prop="QQ" label="QQ"> </el-table-column>
          <el-table-column prop="time" label="入职时间"> </el-table-column>
          <el-table-column label="操作">
            <template>
              <el-link class="link" type="primary">角色变更</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      querytxt: "",
      select: "姓名",
      tableData: [
        {
          id: 1001,
          name: "张三",
          sex: "男",
          age: 18,
          phone: 123456789,
          QQ: 123455,
          time: "1004-02-03",
        },
        {
          id: 1001,
          name: "张三",
          sex: "男",
          age: 18,
          phone: 123456789,
          QQ: 123455,
          time: "1004-02-03",
        },
        {
          id: 1001,
          name: "张三",
          sex: "男",
          age: 18,
          phone: 123456789,
          QQ: 123455,
          time: "1004-02-03",
        },
        {
          id: 1001,
          name: "张三",
          sex: "男",
          age: 18,
          phone: 123456789,
          QQ: 123455,
          time: "1004-02-03",
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.box-card {
  margin-top: 10px;
}
.link {
  padding: 10px;
}
.showdata{
  margin-top: 10px;
}
</style>>
